<template>
  <div>
    <div class="attendance-qr p-flex p-ai-c">
      <div class="qr-img p-flex p-ai-c p-jc-c">
        <div class="qr">
          我是二维码
        </div>
      </div>
      <div class="list p-flex p-fw-w p-f-1">
        <div class="item" v-for="(item, index) in studentList" :key="index">
          <div class="img">
            <img :src="item.imgUrl" alt="暂无头像">
          </div>
          <div>{{ item.studentName }}</div>
        </div>
      </div>
    </div>

    <div>
      <el-button @click="makeCanvas(800, 567)">绘制证书</el-button>
      <img :src="img_src" alt="">
    </div>

    <div style="display: none">
      <img src="@/assets/images/111.png" alt="" id="scream">
      <img src="@/assets/images/222.png" alt="" id="scream2">
      <img src="@/assets/images/333.png" alt="" id="scream3">
      <img src="@/assets/images/444.png" alt="" id="scream4">
      <canvas id="myCanvas"></canvas>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

const myCanvas = ref("")
const ctx = ref("")
const info = reactive({
  name: "张三",
  starYear: "2022",
  startMonth: "09",
  startDay: "10",
  endYear: "2023",
  endMonth: "09",
  endDay: "10",
  courseName: "化妆班(就业系列)的身份地",
  provideYear: "2023",
  provideMonth: "06",
  provideDay: "31",
  bookNo: "FF20230300000"
})

const makeCanvas = (width, height) => { // 初始化画板
  myCanvas.value = document.getElementById('myCanvas');  // 画板id
  myCanvas.value.width = width;  //尺寸
  myCanvas.value.height = height;
  ctx.value = myCanvas.value.getContext('2d');
  ctx.value.fillStyle = '#fff';
  ctx.value.fillRect(0, 0, myCanvas.value.width, myCanvas.value.height);
  const img = document.getElementById("scream");
  ctx.value.drawImage(img, 0, 0, width, height)
  const img2 = document.getElementById("scream2");
  ctx.value.drawImage(img2, 140, 390, 60, 60)
  const img3 = document.getElementById("scream3");
  ctx.value.drawImage(img3, 595, 120, 80, 120)
  const img4 = document.getElementById("scream4");
  ctx.value.drawImage(img4, 545, 360, 120, 120)
  ctx.value.font="12px Arial";
  ctx.value.fillStyle = 'black'
  ctx.value.fillText(info.starYear,210,282);
  ctx.value.fillText(info.startMonth,272,282);
  ctx.value.fillText(info.startDay,308,282);
  ctx.value.fillText(info.endYear,365,282);
  ctx.value.fillText(info.endMonth,425,282);
  ctx.value.fillText(info.endDay,458,282);
  ctx.value.fillText(info.bookNo,645,99);
  ctx.value.fillText(info.provideYear,568,448);
  ctx.value.fillText(info.provideMonth,620,448);
  ctx.value.fillText(info.provideDay,650,448);
  ctx.value.textAlign="center";
  ctx.value.fillText(info.courseName,306,305);
  ctx.value.textAlign="center";
  ctx.value.fillText(info.name,163,230);
  imagePut()
}
const img_src = ref("")
function imagePut() {
  img_src.value = myCanvas.value.toDataURL('image/png');
}


const studentList = reactive([
  {
    imgUrl: "img/404.png",
    studentName: "张三"
  },
  {
    imgUrl: "https://img-home.csdnimg.cn/images/20230315101411.jpg",
    studentName: "张三5"
  },
  {
    imgUrl: "img/404.png",
    studentName: "张三"
  },
  {
    imgUrl: "https://img-home.csdnimg.cn/images/20230315101411.jpg",
    studentName: "张三5"
  },
  {
    imgUrl: "img/404.png",
    studentName: "张三"
  },
  {
    imgUrl: "https://img-home.csdnimg.cn/images/20230315101411.jpg",
    studentName: "张三5"
  },
  {
    imgUrl: "img/404.png",
    studentName: "张三"
  },
  {
    imgUrl: "https://img-home.csdnimg.cn/images/20230315101411.jpg",
    studentName: "张三5"
  },
  {
    imgUrl: "img/404.png",
    studentName: "张三"
  },
  {
    imgUrl: "https://img-home.csdnimg.cn/images/20230315101411.jpg",
    studentName: "张三5"
  },
  {
    imgUrl: "img/404.png",
    studentName: "张三"
  },
  {
    imgUrl: "https://img-home.csdnimg.cn/images/20230315101411.jpg",
    studentName: "张三5"
  },
  {
    imgUrl: "img/404.png",
    studentName: "张三"
  },
  {
    imgUrl: "https://img-home.csdnimg.cn/images/20230315101411.jpg",
    studentName: "张三5"
  },
  {
    imgUrl: "img/404.png",
    studentName: "张三"
  },
  {
    imgUrl: "https://img-home.csdnimg.cn/images/20230315101411.jpg",
    studentName: "张三5"
  },
  {
    imgUrl: "img/404.png",
    studentName: "张三"
  },
  {
    imgUrl: "https://img-home.csdnimg.cn/images/20230315101411.jpg",
    studentName: "张三5"
  },
  {
    imgUrl: "img/404.png",
    studentName: "张三"
  },
  {
    imgUrl: "https://img-home.csdnimg.cn/images/20230315101411.jpg",
    studentName: "张三5"
  },
  {
    imgUrl: "img/404.png",
    studentName: "张三"
  },
  {
    imgUrl: "https://img-home.csdnimg.cn/images/20230315101411.jpg",
    studentName: "张三5"
  },
])
</script>

<style lang="scss" scoped>
.attendance-qr {
  .qr-img {
    height: 400px;
    width: 33.33%;
    .qr {
      width: 300px;
      height: 300px;
      text-align: center;
      line-height: 300px;
      border: 1px solid;
    }
  }

  .list {
    padding-right: 100px;
    .item {
      text-align: center;
      margin: 15px;
      .img {
        width: 81px;
        height: 81px;
        line-height: 81px;
        text-align: center;
        border: 1px solid #cec9c9;
        border-radius: 50%;
        margin-bottom: 10px;
      }
      img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
    }
  }
}

#scream {
  width: 800px;
  height: 567px;
}
</style>